<template>
    <!-- form表单的约定，双向绑定v-model="formData" -->
    <!-- v-model 绑定的就是modelValue的属性 -->
    <el-form :model="formData" label-width="120px">
        <el-form-item label="商品名称">
            <el-input v-model="formData.name" />
        </el-form-item>

        <el-form-item label="商品图片">
            <Tuku v-model="formData.img"></Tuku>
        </el-form-item>

        <el-form-item label="父类">
           <CategoryTree v-model="formData.parentId"></CategoryTree>
        </el-form-item>

        <el-form-item label="排序">
            <el-input-number v-model="formData.seq" :min="1" :max="99" />
            <!-- <el-input v-model="formData.name"/> -->
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>

        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// ref 是针对某一个变量的引用，reactive 是针对对象的引用

import Tuku from "@/components/Tuku.vue";
import { categoryApi } from "@/api";
import { ElMessage } from 'element-plus'

import CategoryTree from "@/components/CategoryTree.vue";
// 因为formData 是一个对象
const formData = reactive({
    name: "",
    img: "",
    seq: 1,
    parentId: 0
})
// const categoryData = ref([
//     {
//         value: 0,
//         label: '一级分类',
//     }
// ])
onMounted(() => {
    // callCategoryApi()

    // 是扁平化的数据转成树形结构
    // let henan = ["烩面", "道口烧鸡", "胡辣汤", "灌汤包", "花生糕", "黄牛肉"]
    // let eatFoods = henan.reduce((duzi: any, currentValue: any) => {
    //     if (currentValue == "道口烧鸡") { duzi.push(currentValue) }
    //     if (currentValue == "黄牛肉") { duzi.push(currentValue) }
    //     return duzi;
    // }, [])
    // console.log(eatFoods);

})


// onSubmit是一个方法
const onSubmit = () => {
    console.log(formData);
    categoryApi.insert.call(formData).then(() => {
        // console.log(res);
        ElMessage.success('添加成功')
        // callCategoryApi()
    })
}

</script>